<template>
	<div class="_flex _flex-a-start _flex-around _p5 _wrapper app-container">
		<div class="_cart _wrapper-y _p5 _box-scroll _over-scroll-hidden _m-r-5" style="width: 12%;">
			<!-- <el-input v-model="likeRegion" size="small" placeholder="设备模糊搜索"></el-input> -->
			<el-tree :data="regionList" :props="{label: 'name'}" node-key="indexCode" show-checkbox
				@check="regionChange" />
		</div>
		<div class="_cart _wrapper-y _p5 _m-r-5 _over-hidden" style="width: 12%;">
			<div class="_wrapper _box-scroll _over-scroll-hidden">
				<el-input v-model="likeName" size="small" placeholder="设备模糊搜索"></el-input>
				<el-radio-group style="width: 100%;" v-model="currentCameraIndexCode">
					<div v-for="cameraIndexCode in filterCarmeList">
						<el-radio style="width: 100%; margin-top: 3px;" class="_ellipsis"
							:label="cameraIndexCode.cameraIndexCode" size="small" border>
							{{cameraIndexCode.cameraName}}({{cameraIndexCode.cameraTypeName}})
						</el-radio>
					</div>
				</el-radio-group>
				<el-input style=" margin-top: 3px;" v-model="customerCameraIndexCode" size="small"
					placeholder="请输入自定义cameraIndexCode" @keyup.enter="changeCameraIndexCode(customerCameraIndexCode)">
				</el-input>
			</div>
		</div>
		<div class="_cart _flex-item-1 _wrapper-y">
			<VideoHkPlug :cameraIndexCode="currentCameraIndexCode" ref="videoHkPlugRef" />
		</div>
	</div>
</template>

<script>
	// 海康插件播放组件
	import hkApi from "./components/ApiHaikang";
	import VideoHkPlug from "./components/video-hk-plug.vue";

	export default {
		components: {
			VideoHkPlug
		},
		data() {
			return {
				currentCameraIndexCode: "6d97475c2fce4457a453f459e0c966d5",
				customerCameraIndexCode: "",
				likeName: "",
				cameraIndexCodes: [],
				regionList: [],
				currentRegion: "",
				likeRegion: ""
			}
		},
		computed: {
			regionTree() {

			},
			filterCarmeList() {
				if (!this.likeName) {
					return this.cameraIndexCodes;
				}
				return this.cameraIndexCodes.filter(item => {
					return item.cameraName.indexOf(this.likeName) != -1;
				})
			}
		},
		mounted() {
			this.initRegions();
			this.inintCarmeList();
		},
		beforeDestroy() {
			this.$refs.videoHkPlugRef.closeVideo();
		},
		methods: {
			/**
			 * 区域变更触发
			 */
			regionChange(data, checkList) {
				this.inintCarmeList(checkList.checkedKeys);
			},
			/**
			 * 初始化区域信息
			 */
			initRegions() {
				hkApi.areaSearch().then(res => {
					this.regionList = res;
				})
			},
			/**
			 * 初始化监控点数据
			 */
			inintCarmeList(checkedKeys) {
				if (checkedKeys && checkedKeys.length > 0) {
					this.cameraIndexCodes = [];
					checkedKeys.forEach(item => {
						hkApi.cameraSearch(this.likeName, item).then(res => {
							this.cameraIndexCodes = [...this.cameraIndexCodes, ...res.list];
						})
					})
				} else {
					hkApi.cameraSearch(this.likeName).then(res => {
						this.cameraIndexCodes = res.list;
					})
				}
			},
			/**
			 * 监控点变更
			 * @param {Object} cameraIndexCode
			 */
			changeCameraIndexCode(cameraIndexCode) {
				this.cameraIndexCodes.add({
					cameraIndexCode,
					cameraName: cameraIndexCode
				});
				this.currentCameraIndexCode = cameraIndexCode;
			}
		}
	}
</script>
<style>
	.el-tree-node__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
<style scoped>

</style>
